<template>

  <div style="padding: 20px;">
    <el-button @click="changeForm()">changeForm</el-button>
    <a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true"
              @close="handleCancel" :visible="visible" style="height: 100%;overflow: auto;padding-bottom: 53px;">
      <ng-form-build ref="formBuild" :models="models" :config="config" :formTemplate="form" />
    </a-drawer>



<!--    <div style="text-align: center;">-->
<!--      <el-button type="primary" size="mini" @click="dataFormSubmit()">提交</el-button>-->
<!--    </div>-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawerWidth: 700,
      title: "展开",
      visible: true,
      form:{},

      config: {
        httpConfig: (config)=>{
          config.headers['aaaa'] = 'bbbb'
          return config
        },
        dict: [
          {type: 'sex' , label: '男' , value: '1'},
          {type: 'sex' , label: '女' , value: '2'},
          {type: 'yes_or_no' , label: '是' , value: '1'},
          {type: 'yes_or_no' , label: '否' , value: '2'},
          {type: 'nation' , label: '汉族' , value: '1'},
          {type: 'nation' , label: '蒙古族' , value: '2'},
          {type: 'nation' , label: '藏族' , value: '3'},
          {type: 'nation' , label: '壮族' , value: '4'}
        ]

      },
      // 标记历史数据
      models: {name:"123","dataSource":"1","execSql":"123123","syncType":"all","dataSource_label":"下拉框1","syncType_label":"全量"}
    }
  },
  created() {
    this.form={
      "list": [
        {
          "type": "input",
          "options": {
            "defaultValue": "",
            "type": "text",
            "prepend": "",
            "append": "",
            "placeholder": "请输入",
            "maxLength": 0,
            "clearable": false,
            "hidden": false,
            "disabled": false
          },
          "label": "名称",
          "labelWidth": -1,
          "width": "100%",
          "span": 24,
          "model": "name",
          "key": "input_16915843546960",
          "rules": [
            {
              "required": true,
              "message": "请填写名称",
              "trigger": [
                "blur"
              ]
            }
          ]
        },
        {
          "type": "select",
          "options": {
            "defaultValue": "",
            "placeholder": "请输入",
            "dynamic": 0,
            "options": [
              {
                "value": "1",
                "label": "下拉框1"
              },
              {
                "value": "2",
                "label": "下拉框2"
              }
            ],
            "methodType": "get",
            "dynamicPostData": "",
            "remoteFunc": "",
            "dataPath": "",
            "remoteValue": "",
            "remoteLabel": "",
            "dictType": "",
            "multiple": false,
            "showSearch": false,
            "clearable": false,
            "hidden": false,
            "disabled": false,
            "selectCb": "",
            "clearCb": "",
            "linkage": false,
            "linkData": []
          },
          "label": "数据源",
          "labelWidth": -1,
          "width": "100%",
          "span": 24,
          "model": "dataSource",
          "key": "select_16915843546963",
          "rules": [
            {
              "required": true,
              "message": "请填写数据源",
              "trigger": [
                "blur"
              ]
            }
          ]
        },
        {
          "type": "textarea",
          "options": {
            "defaultValue": "",
            "rows": 4,
            "placeholder": "请输入",
            "maxLength": 0,
            "clearable": false,
            "autosize": false,
            "hidden": false,
            "disabled": false
          },
          "label": "执行sql",
          "labelWidth": -1,
          "width": "100%",
          "span": 24,
          "model": "execSql",
          "key": "textarea_16915843546961",
          "rules": [
            {
              "required": true,
              "message": "请填写sql信息",
              "trigger": [
                "blur"
              ]
            }
          ]
        },
        {
          "type": "radio",
          "options": {
            "defaultValue": "",
            "placeholder": "请输入",
            "dynamic": 0,
            "options": [
              {
                "value": "all",
                "label": "全量"
              },
              {
                "value": "increment",
                "label": "增量"
              }
            ],
            "methodType": "get",
            "dynamicPostData": "",
            "remoteFunc": "",
            "dataPath": "",
            "remoteValue": "",
            "remoteLabel": "",
            "dictType": "",
            "hidden": false,
            "disabled": false,
            "linkage": false,
            "linkData": []
          },
          "label": "同步方式",
          "labelWidth": -1,
          "width": "100%",
          "span": 24,
          "model": "syncType",
          "key": "radio_16915843546965",
          "rules": [
            {
              "required": true,
              "message": "请填写同步方式",
              "trigger": [
                "blur"
              ]
            }
          ]
        }
      ],
      "config": {
        "labelPosition": "left",
        "labelWidth": 100,
        "size": "mini",
        "outputHidden": true,
        "hideRequiredMark": false,
        "syncLabelRequired": false,
        "customStyle": ""
      },

    }
  },
  methods: {
    dataFormSubmit() {
      const models = this.$refs.formBuild.getData(true)
      console.log('表单提交:' , JSON.stringify(models))
    },
    changeForm(){
      this.visible = true
      this.form={
        "list": [
          {
            "type": "input",
            "options": {
              "defaultValue": "",
              "type": "text",
              "prepend": "",
              "append": "",
              "placeholder": "请输入",
              "maxLength": 0,
              "clearable": false,
              "hidden": false,
              "disabled": false
            },
            "label": "输入框",
            "labelWidth": -1,
            "width": "100%",
            "span": 24,
            "model": "input_16915938451040",
            "key": "input_16915938451040",
            "rules": [
              {
                "required": false,
                "message": "必填项",
                "trigger": [
                  "blur"
                ]
              }
            ]
          }
        ],
        "config": {
          "labelPosition": "left",
          "labelWidth": 100,
          "size": "mini",
          "outputHidden": true,
          "hideRequiredMark": false,
          "syncLabelRequired": false,
          "customStyle": ""
        }
      }
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
  }
}
</script>